<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <style>
     p {
        padding: 5px;
        border: medium double black;
        background-color: lightgray;
        font-family: sans-serif;
    }
    #banana{
        font-size: x-large;
        border: medium solid white;
        background-color: green;
        color: rgba(255,255,255,0.7);
        /* 光标样式 */
        cursor: progress;
    }
    </style>
</head>

<body>
    <p id="fruittext">
        There are lots of different kinds of fruit - there are over 500 varieties
        of <span id="banana">banana</span> alone. By the time we add the countless
        types of apples, oranges, and other well-known fruit, we are faced with thousands of choides.
    </p>
</body>

</html>